<template>
  <div class="app-container">
    <!--收藏企业-->
    <el-row :gutter="20">
      <!--收藏企业选项卡-->
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">收藏企业</span></el-menu-item>
        </el-menu>
      </el-col>
      <!--收藏企业选项卡-->
      <!--收藏企业-->
      <el-col :span="24">
        <el-card
          style="
                margin-top: 10px;
                padding-bottom: 10px;
                width: 100%;"
          shadow="hover">
          <div>
            <!--收藏企业向标题-->
            <div class="job-status__title">
              收藏企业
              <span class="job-status__title__must">必填</span>
            </div>
            <!--收藏企业标题-->
            <!--收藏企业列表展示-->
            <div style="clear: both;">
              <el-card
                style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                shadow="hover">
                <template v-if="companyList.length != 0">
                  <el-descriptions v-for="(item,index) in companyList" :key="item.id"  style="padding: 20px;color: red;"  :title="item.companyName" :column="2">
                    <template slot="extra">
                      <el-button type="primary" icon="el-icon-view"  size="mini" slot="reference" @click="handleSeeDetail(item.companyId)">详情</el-button>
                      <el-button type="danger" size="mini" @click="handleDelete(item.id)" class="el-icon-delete-solid">删除</el-button>
                    </template>
                    <el-descriptions-item label="公司名称">{{item.companyName}}</el-descriptions-item>
                    <el-descriptions-item label="收藏时间">{{item.favorDate}}</el-descriptions-item>
                  </el-descriptions>
                  <!--分页组件-->
                  <el-pagination
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    :total="pagination.total"
                    :page-sizes="[10, 20, 50, 100]"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total,sizes, prev, pager, next, jumper">
                  </el-pagination>
                  <!--分页组件-->
                </template>
                <template v-else>
                  <el-result icon="info" title="新增信息提示" subTitle="当前还没有收藏企业方面的说明哦！">
                    <template slot="extra">
                      <el-empty description="快去收藏企业吧！"></el-empty>
                    </template>
                  </el-result>
                </template>
              </el-card>
            </div>
            <!--收藏企业列表展示-->
          </div>
        </el-card>
      </el-col>
      <!--收藏企业  -->
    </el-row>
    <!--查看公司详情对话框-->
    <el-dialog
      title="查看公司详情对话框"
      :visible.sync="dialogFormVisible4Detail"
      width="800px"
      height="800px"
      :before-close="handleDetailFormClose">
      <el-descriptions title="企业信息">
        <el-descriptions-item label="公司名称">{{company.name}}</el-descriptions-item>
        <el-descriptions-item label="公司账号">{{company.account}}</el-descriptions-item>
        <el-descriptions-item label="公司负责人">{{company.contact}}</el-descriptions-item>
        <el-descriptions-item label="公司地址">{{company.addr}}</el-descriptions-item>
        <el-descriptions-item label="公司网址">{{company.url}}</el-descriptions-item>
        <el-descriptions-item label="公司规模">{{company.size}}</el-descriptions-item>
        <el-descriptions-item label="公司类型">{{company.type}}</el-descriptions-item>
        <el-descriptions-item label="公司logo">
          <el-avatar size="small" :src="company.logo"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="公司创建时间">{{company.created}}</el-descriptions-item>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <el-divider></el-divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
      </el-descriptions>
      <el-descriptions title="职位信息">
        <el-descriptions-item label="岗位情况">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="(item,index) in company.postList" :key="item.id" :title="item.name" :name="item.id">
              <div>
                <span style="color: red"><i class="el-icon-coin"></i>薪资：</span>        <span style="color: #2d5c9e">{{item.salary}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: red"><i class="el-icon-s-custom"></i>岗位招募人数：</span>  <span style="color: #2d5c9e">{{item.count}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red;"><i class="el-icon-s-home"></i>工作地点：</span>     <span style="color: #2d5c9e">{{item.address}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: red"><i class="el-icon-reading"></i> 学历要求：</span>     <span style="color: #2d5c9e">{{item.education}}</span>  &nbsp;&nbsp;&nbsp;&nbsp;
                <el-divider><i class="el-icon-chat-dot-round"></i></el-divider>
              </div>
              <div>
                {{item.description}}
                <el-divider><i class="el-icon-chat-dot-round"></i></el-divider>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="公司优势">
        <el-descriptions-item label="公司优势">
          <el-tag
            v-for="tag in company.advantageList"
            :key="tag.name">
            {{tag.name}}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--查看公司企业对话框-->
  </div>
</template>

<script>
    import {getFavorCompany,deleteFavor} from "@/api/favor";
    import {findDetailById} from "@/api/company";
export default {
  name: "index",
  data() {
    return {
      wrapperVisible:false, //展示展示框状态
      companyList:[],//公司数组
      pagination: {
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
        queryParams:{}//查询条件
      },//分页数据模型数
      activeNames: ['1'],
      company:{},//公司信息
      dialogFormVisible4Detail:false //公司详情展示框是否显示
    }
  },
  created() {
    this.findPage()
  },
  methods: {
    //弹出查询公司详情窗口的方法
    handleSeeDetail(id){
      console.info("【====系统正在弹出公司详情窗口====】")
      this.resetForm();
      this.dialogFormVisible4Detail = true;
      findDetailById(id).then(res=>{this.company = res.data;})
      console.info(`====【系统正在弹出公司详情窗口成功！！并成功获取了ID为：${id}的公司详情窗口详情=====`)
    },
    //清空表单数据
    resetForm(){
      this.company = {}
    },
    //关闭详情表单的方法
    handleDetailFormClose(){
      this.dialogFormVisible4Detail = false;
      //设置表单数据模型为空
      this.resetForm();
    },
    handleChange(val) {
      console.log(val);
    },
    //获取收藏公司投递集合
    findPage(){
      console.log("======系统正在获取收藏公司投递集合========")
      getFavorCompany(this.pagination).then(res=>{
        this.companyList = res.data.rows;
        this.pagination.total = res.data.total;
      })
      console.log("======系统获取收藏公司投递集合成功！！========")
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //删除收藏记录
    handleDelete(id){
      this.$confirm(`此操作将【永久删除】该收藏记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFavor(id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {this.findPage()}
          })
        })
      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },
    //切换展示框的展示
    handleChangeDisplay() {
      this.wrapperVisible = !this.wrapperVisible
    },





  }
}
</script>

<style scoped>
.s-scrollbar {
  overflow: hidden;
  position: relative;
}
/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/

</style>
